.bs-slider{
  position: relative;
  //height: .75rem;
  padding: .3rem 0;
  &.has-marks{
    margin-bottom: .7rem;
  }
  //border: 1px solid #000;
  //background-color: #000;
}
.bs-slider-rail{
  position: relative;
  height: .25rem;
  border-radius: .125rem;
  cursor: pointer;
  transition: background-color .3s;
  background-color: #f5f5f5;
}
.bs-slider-track{
  position: absolute;
  height: .25rem;
  left: 0;
  width: 0;
  border-radius: .125rem;
  transition: background-color .3s;
  background-color: #70A4F9;
}
.bs-slider-step{
  position: absolute;
  left: 0;
  right: 0;
  height: .25rem;
}
.bs-slider-dot{
  position: absolute;
  top: -.125rem;
  height: .5rem;
  width: .5rem;
  border-radius: 50%;
  border: .125rem solid #eee;
  transform: translateX(-50%);
  transition: border-color .1s;
  background-color: #fff;
  &.bs-slider-dot-active{
    border-color: #70A4F9;
  }
  /*&:first-child{
    transform: translateX(0);
  }*/
  &:last-child[data-percentage="100"]{
    transform: translateX(-75%);
  }
}
.bs-slider-handler{
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 0;
  height: .875rem;
  width: .875rem;
  border: .125rem solid #70A4F9;
  margin-top: -0.4375rem;
  transform: translateX(-50%);
  transform-origin: -25% center;
  border-radius: 50%;
  background-color: #fff;
  transition: border-color .3s, transform .3s;
  &:hover{
    border-color: var(--primary);
    transform: scale(1.2) translateX(-50%);
  }
  /*&[data-percentage="0"]{
    transform: translateX(0);
    transform-origin: center center;
    &:hover{
      border-color: var(--primary);
      transform: scale(1.2) translateX(0);
    }
  }
  &[data-percentage="1"]{
    transform: translateX(-100%);
    transform-origin: -50% center;
    &:hover{
      border-color: var(--primary);
      transform: scale(1.2) translateX(-100%);
    }
  }*/
}
.bs-slider-marks{
  position: relative;
  margin-top: .375rem;
}
.bs-slider-mark-text{
  position: absolute;
  transform: translateX(-50%);
  font-size: .75rem;
  word-break: keep-all;
  color: #808080;
  cursor: pointer;
  &.bs-slider-mark-text-active{
    color: #000;
  }
  &:first-child{
    transform: translateX(0);
  }
  &:last-child[data-percentage="100"]{
    transform: translateX(-100%);
  }
}

.bs-slider{
  &.bs-slider-vertical{
    display: inline-block;
    vertical-align: top;
    height: 10rem;
    width: auto;
    padding: 0;
    &.has-marks{
      margin-right: 1.2rem;
    }
    .bs-slider-rail{
      //float: left;
      display: inline-block;
      width: .25rem;
      height: 100%;
    }
    .bs-slider-track{
      width: .25rem;
      height: 30%;
    }
    .bs-slider-step{
      left: 0;
      right: auto;
      top: 0;
      height: 100%;
      width: .25rem;
    }
    .bs-slider-dot{
      top: auto;
      left: -.125rem;
      transform: translate(0, -50%);
      &:last-child[data-percentage="100"]{
        transform: translate(0, -75%);
      }
    }
    .bs-slider-marks{
      //float: left;
      display: inline-block;
      //width: 1px;
      height: 100%;
      margin-left: .5rem;
      margin-top: 0;
      background-color: #f60;
    }
    .bs-slider-mark-text{
      transform: translate(0, -45%);
      &:last-child[data-percentage="100"]{
        transform: translate(0, -85%);
      }
    }
    .bs-slider-handler{
      top: 0;
      left: 50%;
      margin-top: 0;
      margin-left: -0.4375rem;
      transform: translate(0, -50%);
    }
  }
  &:not(.bs-slider-disabled):hover{
    .bs-slider-rail{
      background-color: #e1e1e1;
    }
    .bs-slider-track{
      background-color: var(--primary);
    }
  }
  &.bs-slider-disabled{
    .bs-slider-rail{
      cursor: not-allowed;
      background-color: #f5f5f5;
    }
    .bs-slider-track{
      background-color: rgba(0,0,0,0.4);
    }
    .bs-slider-handler{
      border-color: rgba(0,0,0,0.4);
    }
    .bs-slider-dot{
      border-color: #f0f0f0;
    }
    .bs-slider-handler{
      &:hover{
        transform: scale(1) translateX(-50%);
      }
    }
    .bs-slider-mark-text{
      color: #939393;
      cursor: not-allowed;
    }
  }
}
